<template>
  <w-modal ref="WModal" :span="[3]" :title="model ? '添加用户' : '修改用户'" :successFunc="successFunc">
    <template v-slot:default>
      <a-form-item label="用户名">
        <a-input
          v-decorator="['user', { rules: [{ required: true, message: '请输入' }], initialValue: model ? model.user : '' }]"
          type="text"
          placeholder="用户名称"
        />
      </a-form-item>
      <a-form-item v-if="!model" label="密码">
        <a-input
          v-decorator="['pass', { rules: [{ required: true, message: '请输入' }] }]"
          type="text"
          placeholder="密码"
        />
      </a-form-item>
      <a-form-item prop="role" label="角色">
        <a-select v-decorator="['role', { rules: [{ required: true, message: '请选择' }], initialValue: model ? model.role._id : null }]">
          <a-select-option v-for="v in roles" :key="v._id" :value="v._id">{{ v.name }}</a-select-option>
        </a-select>
      </a-form-item>
    </template>
  </w-modal>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import { Admin } from "@/config/api";
import WModal, { ModalFormComType } from "@/components/global/modal/form";

@Component({
  name: "ComAdminAuthUserList",
  components: {
    WModal,
  },
})
export default class Com extends Vue {
  @Prop({ type: Array, default: () => [] }) roles!: Array<any>;
  model: any = null;

  /**
   * 显示
   */
  show(model: any) {
    this.model = model || null;
    (this.$refs.WModal as ModalFormComType).show();
  }

  /**
   * 确定按钮点击
   */
  async successFunc(values: any) {
    const api = this.model ? `${Admin.auth.user.update}${this.model._id}` : Admin.auth.user.create
    const method = this.model ? '$put' : '$post'
    await this.$wAxios[method](api, {
      ...values,
    });
    this.$emit("reload");
  }
}
</script>

<style scoped></style>
